<template>
    <div class="banner fullSlide">
        <div class="bd">
            <ul>
                <li v-for="(item, index) in coverImgs" :key="index" :style="{background: 'url('+ item.bg +')'}">
                    <template v-if="item.childImgs.length">
                        <div class="wid-1200 list-wrap">
                            <div class="banner1 scaleTo">
                                <img :src="item.childImgs[0]" alt="">
                            </div>
                            <div class="banner2">
                                <img :src="item.childImgs[1]" alt="">
                            </div>
                        </div>
                    </template>
                </li>
            </ul>
        </div>
        <!-- registform start -->
        <!-- registform end -->
        <div class="hd">
            <ul></ul>
        </div>
        <a class="prev" href="javascript:;"></a>
        <a class="next" href="javascript:;"></a>
    </div>
</template>

<script>
import $ from 'jquery'
require('../assets/jquery.SuperSlide.2.1.2.js')
import bg from '../assets/bg.png'
import bg1 from '../assets/bg1.png'
import banner1 from '../assets/banner1.png'
import banner2 from '../assets/banner2.png'

export default {
    name: 'Banner',
    data() {
        return {
            coverImgs: [
                {
                    bg: bg,
                    childImgs: [banner1, banner2]
                 }, {
                     bg: bg1,
                     childImgs: []
                 }]
        }
    },
    methods: {
        
    },
    mounted () {
        console.log('挂载完毕');
        console.log(`this.data->${this.$data}`);
        console.log(`this.el->${this.$el}`);
        console.log($(".fullSlide"));
        $(".fullSlide").slide({ titCell: ".hd ul", mainCell: ".bd ul", effect: "leftLoop", vis: "auto", autoPlay: false, autoPage: true, trigger: "click" });
    }
}
</script>

<style lang="scss">
.fullSlide {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    .bd {
        position: relative;
		z-index: 0;
        li {
            width: 100%;
            height: 511px;
            background-size: 100% 100%; 
            overflow: hidden;
            .list-wrap {
                height: 100%;
                position: relative;
                .banner1 {
                    position: absolute;
                    top:63px;
                    left: -12px;
                }
                .banner2 {
                    position: absolute;
                    bottom: 0;
                    left: -100px;
                }
            }
        }
    }
    .hd {
        position: absolute;
        width: 100%;
        z-index: 9;
        bottom: 0;
        height: 30px;
        line-height: 30px;
        text-align: center;
        ul {
            text-align: center;
            margin: 0;
            padding: 0;
            li {
                cursor: pointer;
				display: inline-block;
				*display: inline;
				zoom: 1;
				width: 8px;
				height: 8px;
				margin: 5px;
				background: url(../assets/tg_flash_p.png) -18px 0;
				overflow: hidden;
                font-size: 0;
                
                &.on {
                    background-position: 0 0;
                }
            }
            
        }
    }
    .banner-box {
        height: 511px;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -600px;
        z-index: 8;
    }

    & .prev,& .next {
        z-index: 1;
        display: block;
        width: 55px;
        height: 55px;
        position: absolute;
        top: 50%;
        margin-top: -27.5px;
        background: url(../assets/arrow.png) 0 0 no-repeat;
        filter: alpha(opacity=40);
        opacity: 0.4
    }
    .prev {
        background-position: left 0;
        left: 10%;
        right: auto;
        &:hover {
            filter: alpha(opacity=80);
            opacity: 0.8
        }
    }
    .next {
        background-position: right 0;
        right: 10%;
        left: auto;
        &:hover {
            filter: alpha(opacity=80);
			opacity: 0.8
        }
    }
}
</style>
